<head th:include="~{common/header::header}" />
<title>代码&amp;视觉|多角度着眼，多维度审视|用户注册</title>
<body id="register">
	<div th:insert="~{common/navbar :: navbar}"></div>
	<div class="container minh">
		<div class="row">

			<div class="col-md-4 offset-md-4 main-form">
				<form id="regForm"  th:action="@{/portal/register}" th:object="${systemUser}" method="post">
					<h6 class="mb-3  text-dark">
						<i class="fa fa-user" aria-hidden="true"></i> 用户注册
					</h6>
					<div class="input-group mb-3">
						<div class="input-group-prepend">
							<span class="input-group-text"><i class="fa fa-user" aria-hidden="true"></i></span>
						</div>
						<input id="input_user" type="text" th:field="*{username}" class="form-control" placeholder="请输入用户名" required autofocus onblur="checkuser();">
					</div>

					<div class="input-group mb-3 px-5">
						<span id="tips"></span>
					</div>

					<div class="input-group mb-3">
						<div class="input-group-prepend">
							<span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span>
						</div>
						<input type="password" th:field="*{password}" id="password" name="password" class="form-control" placeholder="请输入密码" required autocomplete="pwd">
					</div>

					<div class="checkbox mb-3">
						<label> <input type="checkbox" th:field=*{agreement} th:value="${agreement}">阅读并接受代码视觉用户服务条款
						</label>
					</div>
					<button id="regSubmit" type="button" class="btn btn-info btn-lg btn-block">注册</button>
				</form>
			</div>

		</div>
	</div>

	<div th:insert="~{common/footer :: footer}"></div>
	<script type="text/javascript">
		var flag = false;
		function checkuser() {
			var data = $("#input_user").val();
			if (data.length > 0) {
				data = "username=" + data;
				$.ajax({
					type : 'POST',
					url : "checkuser.json",
					data : data,
					success : function(result) {
						if ("yes" == result.resultCode) {
							flag = true;
							$("#tips").css("display", "block");
							$("#tips").attr("class", "text-success");
							$("#tips").text(result.resultContent);
							$("#tips").fadeOut(6000);
						} else {
							$("#tips").css("display", "block");
							$("#tips").attr("class", "text-danger");
							$("#tips").text(result.resultContent);
						}
					},
					dataType : "json"
				});
			}
		}

		$(document).ready(function() {
			$("#regSubmit").click(function() {
				if (flag) {
					$("#regForm").submit();
				}
			})
		});
	</script>
</body>